<template>
    <div class="login-container">
        <el-form ref="loginRef" :model="loginForm" :rules="rules" class="login-form" label-position="left">
            <h3 class="title">评测系统</h3>
            <el-form-item prop="username" label="账号" label-width="70px">
                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" @keyup.enter="handleLogin"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码" label-width="70px">
                <el-input v-model="loginForm.password" :type="passwordType" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin"/>
                <span class="show-pwd" @click="showPwd">
                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
            </el-form-item>
            <el-form-item prop="code" label="验证码" label-width="70px">
                <div class="flex-x-between">
                    <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" style="width: 60%"  @keyup.enter.native="handleLogin"/>
                    <img :src="captchaUrl" @click="getCaptcha" class="login-code-img"/>
                </div>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button :loading="loading" type="primary" size="large" style="width: 100%" @click.prevent="handleLogin">
                    <span v-if="!loading">登录</span>
                    <span v-else>登录中...</span>
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup name="login">
import setting from './setting'
import store from '@/stores';
const router = useRouter();
const { proxy } = getCurrentInstance();
import { setToken } from '@/utils/token'



/** Data */
const loading = ref(false)
const passwordType = ref("password")
const uuid = ref("");
const captchaUrl = ref("")

const data = reactive({
    loginForm:{
        username: "admin",
        password: "HYZN@123456",
        uuid:'',
        code:'',
    },
    rules: setting.rules
});
const { loginForm, rules } = toRefs(data);

/**  Method */
// 获取验证码
const getCaptcha = async()=> {
    let _ = proxy
    const { data: res } = await _.$H.post(_.$A.captcha, {})
    captchaUrl.value = res.data.image
    loginForm.value.uuid = res.data.uuid
}
// 登录
const handleLogin = () => {
    let _ = proxy
    _.$refs.loginRef.validate(async valid => {
        if (!valid) return
        loading.value = true
        const {data: res} = await _.$H.post(_.$A.login, loginForm.value)
        console.log('handleLogin',res)
        if (res.code == 200) {
            setToken(res.data.token)
            store.userStore.setToken(res.data.token)
            loading.value = false
            /** 获取菜单*/
            router.push({path:'/components/previewImage'})
        } else {
            loading.value = false
            getCaptcha()
        }
    })
}

// 显示、隐藏密码
const showPwd = () => {
    if (passwordType.value === 'password') {
        passwordType.value = ''
    } else {
        passwordType.value = 'password'
    }
    this.$nextTick(() => {
        this.$refs.password.focus()
    })
}
getCaptcha()
</script>

<style lang="less" scoped>
@import "index.less";
</style>
